<template>
  <div>
    <el-table :data="tableData" height="95%" stripe border
              @selection-change="selectionChange">

      <!-- 复选框     -->
      <el-table-column v-if="selectable" type="selection" width="55"></el-table-column>

      <el-table-column v-for="(attr, index) in tableAttr" :key="index" :fixed="attr.fixed ? attr.fixed : false"
                       :prop="attr.field ? attr.field : ''"
                       :label="attr.label ? attr.label : ''"
                       :width="attr.width ? attr.width : ''"
                       :align="attr.align ? attr.align: 'center'"

      >

        <!-- 子表头（嵌套表头）     -->
        <el-table-column v-if="attr.children"
                         v-for="(child, index) in attr.children" :key="index"
                         :prop="child.field ? child.field : ''"
                         :label="child.label"
                         :width="child.width ? child.width : ''"
                         :align="child.align ? child.align: 'center'"
        >
        </el-table-column>

        <!-- 自定义表头 -->
        <template v-if="attr.header" v-slot:header="scope">
          <p>{{attr.label}}</p>

          <!-- select选择器 -->
          <el-select v-if="attr.header==='select'" multiple filterable allow-create default-first-option placeholder="请选择文章标签"
              v-model="searchData[attr.field]">
            <el-option v-for="opt in attr.options" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
          </el-select>

          <!-- 搜索框 -->
          <el-input v-else-if="attr.header==='input'" suffix-icon="el-icon-search" :placeholder="'输入' + attr.label + '搜索'"
                                v-model="searchData[attr.field]"

                      ></el-input>

          <el-date-picker v-else-if="attr.header==='daterange'"
                          style="width:100%;"
              v-model="searchData[attr.field]"
              size="mini" type="daterange" align="right" unlink-panels range-separator=""
              start-placeholder="开始日期" end-placeholder="结束日期"
              :picker-options="pickerOptions"
              >
          </el-date-picker>

          <!-- 查询按钮-->
          <el-button v-else-if="attr.header==='search'" @click="searchHandler">查询</el-button>

        </template>

        <!--  头像      -->
        <template v-if="attr.type && attr.type==='avatar'" v-slot="scope">
          <el-avatar size="small" :src="scope.row[attr.field]"></el-avatar>
        </template>

        <!--  单个标签      -->
        <template v-else-if="attr.type && attr.type==='tag'" v-slot="scope">
          <el-tag size="small" v-for="(option, index) in attr.options" :key="index"
                  v-if="scope.row[attr.field] === option.value"
                  :type="option.type ? option.type : ''"
          >
            {{option.label}}
          </el-tag>
        </template>

        <!--  多个标签      -->
        <template v-else-if="attr.type && attr.type==='tags'" v-slot="scope">
          <el-tag style="margin-right: 5px;" size="small" type="info"
                  v-for="(value, index) in scope.row[attr.field]" :key="index">
            {{value.name}}
          </el-tag>
        </template>

        <!--  操作列      -->
        <template v-else-if="attr.type && attr.type==='handle'" v-slot="scope">
          <slot name="handle" :row="scope.row"></slot>
          <!-- 如果插槽被填充，则显示分隔线 -->
          <el-divider v-if="$scopedSlots.handle != null" direction="vertical"></el-divider>

            <el-button v-if="showView"
                       :size="attr.handle && attr.handle.view && attr.handle.view.size ? attr.handle.view.size : 'small'"
                       :type="attr.handle && attr.handle.view && attr.handle.view.type ? attr.handle.view.type : 'text'"
                       :disabled="scope.row[attr.field] && scope.row[attr.field]['view']!=null && !scope.row[attr.field]['view']"
                       @click="handleView(scope.row)" >
            {{ attr.handle && attr.handle.view && attr.handle.view.label ? attr.handle.view.label : "查看"}}
          </el-button>

          <el-divider v-if="(showView && showEdit) || (showView && showDelete)" direction="vertical"></el-divider>

          <el-button v-if="showEdit"
                     :size="attr.edit && attr.edit.size ? attr.edit.size : 'small'"
                     :type="attr.edit && attr.edit.type ? attr.edit.type : 'text'"
                     :disabled="scope.row[attr.field] && scope.row[attr.field]['edit']!=null && !scope.row[attr.field]['edit']"
                     @click="handleEdit(scope.row)" >
            {{ attr.edit && attr.edit.label ? attr.edit.label : "编辑" }}
          </el-button>

          <el-divider v-if="showEdit && showDelete" direction="vertical"></el-divider>

          <el-button v-if="showDelete"
                     :size="attr.delete && attr.delete.size ? attr.delete.size : 'small'"
                     :type="attr.delete && attr.delete.type ? attr.delete.type : 'text'"
                     :disabled="scope.row[attr.field] && scope.row[attr.field]['delete']!=null && !scope.row[attr.field]['delete']"
                     @click="handleDelete(scope.row)" >
            {{ attr.delete && attr.delete.label ? attr.delete.label : "删除" }}
          </el-button>
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import props from './props'
import methods from "./methods";
import data from "./data";

export default {
  name: "CommonTable",
  props: props,
  data() {
    return data
  },
  methods: methods
}
</script>

<style scoped>

</style>